<template>
	<view class="container" :style="{paddingTop: `${getSystemInfo.navBarHeight}px`}">

		<navBar
			title="选择赠品"
			custom-back
			@back="toBack"
			@home="toHome"
		></navBar>

		<view class="c-list" >
			<view class="cl-item" v-for="item in giftList" :key="item.ruleId">
				<view class="cli-header">购买{{ item.buyNumber }}条轮胎，赠送以下礼品</view>
				<view class="cli-main">
					<u-radio-group
						v-model="item.active"
						placement="column"
						@change="value => groupChange(value, item.ruleId)"
					>
						<u-radio
							:customStyle="{height: 100 / item.giftInfos.length + '%'}"
							v-for="dot in item.giftInfos"
							:key="dot.rewardId"
							:name="dot.rewardId"
							size="18px"
							icon-size="14px"
							label-size="14px"
						>
						</u-radio>
					</u-radio-group>

					<view class="clim-info">
						<view class="gift-body" v-for="gi in item.giftInfos" :key="gi.rewardId" @click.stop="groupChangeClick(gi.rewardId, item.ruleId)">
							<view class="gb-left">
								<u--image v-if="gi.logo" width="80px" height="80px" :src="gi.logo"></u--image>
								<u--image v-else width="80px" height="80px" src="/static/goods_default_square.png"></u--image>
							</view>
							<view class="gb-right">
								<view class="gbr-name">{{ gi.rewardName || ''}}</view>
								<view class="gbr-number">
									<view class="gbrn-price">
										<text class="symbol">¥</text>
										<text>{{ formatMoney(gi.rewardMoney) }}</text>
									</view>
									<view class="gbrn-count">x {{ item.awardsNumber || 1 }}</view>
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="btn-content">
			<u-button type="primary" text="确定" @click="handleOk"></u-button>
		</view>

	</view>
</template>

<script>
	import {
		formatMoney
	} from '@/common/utils'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import navBar from '@/components/navBar.vue'

	export default {
		components: {
			navBar
		},
		data() {
			return {
				giftList: [],
				tempGiftList: [],
			};
		},
		computed: {
			...mapGetters('cart', ['getGiftList']),
			...mapGetters('global', ['getSystemInfo']),
		},
		methods: {
			...mapMutations('cart', ['setGiftList']),
			formatMoney,
			handleOk() {
				this.setGiftList(this.giftList)
				uni.navigateBack()
			},
			groupChange(value, id) {
				this.giftList.find(i => i.ruleId === id).active = value
				this.$forceUpdate()
			},
			groupChangeClick(value, id){
				if(this.giftList.find(i => i.ruleId === id).active !== value){
					this.giftList.find(i => i.ruleId === id).active = value
					this.$forceUpdate()
				}
			},
			// 返回上一页
			toBack() {
				this.setGiftList(this.tempGiftList)
				uni.navigateBack()
			},
			// 返回首页
			toHome() {
			  uni.switchTab({ url: '/pages/index/index/index' })
			},
		},
		onLoad() {
			this.giftList = this.getGiftList
			if(this.giftList.length){
				this.tempGiftList = JSON.parse(JSON.stringify(this.giftList))
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100%;
		width: 100%;
		box-sizing: border-box;
		padding-bottom: 200rpx;

		.c-list {
			.cl-item {
				margin-top: 24rpx;
				background-color: #ffffff;

				.cli-header {
					border-bottom: 1px solid rgba(0, 0, 0, 0.10);
					padding: 32rpx 0 30rpx 34rpx;
					font-size: 14px;
					color: rgba(0, 0, 0, 0.85);
				}

				.cli-main {
					display: flex;

					/deep/ .u-radio-group {
						flex: none !important;
						// width: 100rpx !important;
						// margin: 0 32rpx;
						padding-left: 32rpx;

						.u-radio {
							box-sizing: border-box;
							border-bottom: 1px solid rgba(0, 0, 0, 0.08);

							&:nth-last-child(1) {
								border-bottom: none;
							}
						}
					}

					.clim-info {
						flex: 1;
						padding-right: 32rpx;
						box-sizing: border-box;

						.gift-body {
							display: flex;
							width: 100%;
							padding: 24rpx 32rpx 16rpx;
							box-sizing: border-box;
							border-bottom: 1px solid rgba(0, 0, 0, 0.08);

							&:nth-last-child(1) {
								border-bottom: none;
							}

							.gb-left {
								overflow: hidden;
								border-radius: 12rpx;
							}

							.gb-right {
								flex: 1;
								margin-left: 24rpx;
								display: flex;
								flex-direction: column;
								justify-content: space-between;

								.gbr-number {
									display: flex;
									justify-content: space-between;

									.gbrn-price {
										color: $uni-primary;

										.symbol {
											font-size: 22rpx;
											margin-right: 2px;
										}
									}

									.gbrn-count {
										font-size: 14px;
										color: rgba(0, 0, 0, 0.85);
									}
								}
							}
						}
					}
				}
			}
		}

		.btn-content {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 1;
			background-color: #ffffff;
			width: 100%;
			height: 178rpx;
			padding: 30rpx 32rpx 0;
			box-sizing: border-box;
		}
	}
</style>